//更新用户信息按钮
import React, { useState, useEffect } from "react";
import {Button, Checkbox, Form, Input, Modal, message,Select} from 'antd'
import { Link, useRouter } from 'next/router';
import axios from 'axios';
const { Option } = Select;
const UpdateInfo = () => {
    const router = useRouter();
    //展开对话框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
     };

    const handleOk = async () => {
        setIsModalOpen(false);
        form.submit();
    };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //对话框中的表单
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Request Body:', values); // 打印请求体内容
    const token = localStorage.getItem('token'); // 获取存储的token
    if (!token) {
      message.error('请先登录');
      router.push('/login');
      return;
    }
    axios.post('/api/user/update_info', values, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
      .then((response) => {
        console.log('Success:', response.data);
        message.success('更新成功');
        // 使用router.push来导航到/main页面
        router.push('/main'); 
      })
      .catch((error) => {
        console.log('Error:', error);
        // 登录失败时的处理
        if (error.response) {
          // 服务器返回了错误响应
          const errorMessage = error.response.data.msg || '更新失败';
          message.error(errorMessage);
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          message.error('请求失败，请检查网络连接');
        } else {
          // 发送请求时出了问题
          message.error('请求失败，请检查后端服务是否可用');
        }
      });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 8,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 16,
      },
    },
  };
  

return (
    <>
      <Button type="link" onClick={showModal}>更新用户信息</Button>
      <Modal title="更新用户信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Form
    {...formItemLayout}
    form={form}
    name="register"
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    style={{
      maxWidth: 600,
    }}
    scrollToFirstError
  >  
  <Form.Item
        name="email"
        label="E-mail"
        rules={[
          {
            type: 'email',
            message: 'The input is not valid E-mail!',
          },
          {
            required: true,
            message: 'Please input your E-mail!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="sex"
        label="sex"
        rules={[
          {
            required: true,
            message: 'Please select gender!',
          },
        ]}
      >
        <Select placeholder="Select your gender">
              <Option value="male">Male</Option>
              <Option value="female">Female</Option>
            </Select>
      </Form.Item>
    </Form>

    </Modal>
    </>
);
    };
  export default UpdateInfo;